<template>
  <div class="onemore">
    <FirstSon />
    <h1 slot="son1">跟没放假一样就很快就上课了</h1>
    <div>{{obj.name}}</div>
    <button @click="add()">点我增加obj属性且显示</button>
    <p v-text="obj.age"></p>
    <hr />
    <br />
    <h4>动态组件（选项卡小范围）</h4>
    <button @click="check('One')">选项一</button>
    <button @click="check('Two')">选项二</button>
    <button @click="check('Three')">选项三</button>
    <keep-alive>
      <!-- 每次切换的时候，vue都会创建一个新的组件实例 -->
      <!-- 用keeep-alive保存组件切换时页面状态的内容，会被缓存起来，可以降低性能损耗 -->
      <component :is="Com"></component>
    </keep-alive>
  </div>
</template>

<script>
import FirstSon from "../../components/cheyi/onemore/FirstSon.vue";
// 动态组件
import One from "../../components/cheyi/onemore/ComOne.vue";
import Two from "../../components/cheyi/onemore/ComTwo.vue";
import Three from "../../components/cheyi/onemore/ComThree.vue";

export default {
  data() {
    return {
      obj: {
        name: "车车"
      },
      Com: "One"
    };
  },
  components: {
    One,
    Two,
    Three,
    FirstSon
  },
  methods: {
    add() {
      this.$set(this.obj, "age", "22");
      console.log(this.obj);
    },
    check(val) {
      // 点击切换
      this.Com = val;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>